<template>
  <div class="time-quantum-item">
    <el-time-select
      v-model="state.startTime"
      :max-time="state.endTime"
      placeholder="开始时间"
      start="00:00"
      end="23:45"
      step="00:15"
      @change="selectChange"
    />
    &nbsp;
    &nbsp;
    <el-time-select
      v-model="state.endTime"
      :min-time="minTime"
      :max-time="maxTime"
      placeholder="结束时间"
      start="00:00"
      end="24:00"
      step="00:15"
      @change="selectChange"
    />
    &nbsp;
    &nbsp;
    <el-icon class="del-icon" @click="del" v-if="props.isDel"><Delete /></el-icon>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, computed, nextTick, onMounted } from 'vue'

  let state = reactive({
    startTime: '',
    endTime: ''
  })
  type Props = {
    modelValue: Array<string>|any,
    isDel: boolean
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: [],
    isDel: false
  })

  const emit = defineEmits(['update:modelValue', 'change', 'del'])

  const selectChange = ()=>{
    emit('update:modelValue', [state.startTime, state.endTime])
    emit('change', true)
  }

  const del = ()=>{
    emit('del', true)
  }

  const init = ()=>{
    if(!!props.modelValue.length){
      state.startTime = props.modelValue[0]
      state.endTime = props.modelValue[1]
    }
  }

  const minTime = computed(()=>{
    if(state.startTime == '24:00'){
      return ''
    }else{
      return state.startTime
    }
  })

  const maxTime = computed(()=>{
    if(state.startTime == '24:00'){
      return '00:30'
    }else{
      return ''
    }
  })

  onMounted(()=>{
    init()
  })

</script>
<style scoped lang="scss">
  .time-quantum-item{
    display: flex;
    align-items: center;
    .del-icon{
      font-size: 18px;
      color: #999;
      &:hover{
        cursor: pointer;
        color: #FF6B00;
      }
    }
  }
</style>
